<template>
  <PageTabbar :themeColor="themeColor">
    <view class="user-container">
      <!-- 渐变背景 -->
      <view class="gradient-bg" :style="gradientStyle">
        <view class="blur-overlay"></view>
      </view>
      
      <!-- 用户信息区域 -->
      <view class="user-info-section">
        <view class="capsule-placeholder" :style="{ height: headerHeight + 'px' }"></view>
        <view class="user-info" v-if="isLoggedIn">
          <view class="avatar-container" :style="{ marginTop: -(headerHeight/3) + 'px' }">
            <image class="avatar" :src="userInfo.avatarUrl || defaultAvatar" @tap.stop="handleAvatarClick"></image>
          </view>
          <view class="user-detail">
            <view class="nickname-container">
              <text class="nickname">{{ userInfo.nickName || '微信用户' }}</text>
              <view class="edit-icon" @tap.stop="handleEditNickname">
                <u-icon name="edit-pen" size="16" color="#fff"></u-icon>
              </view>
            </view>
            <text class="user-id">ID: {{ userInfo.id || '--' }}</text>
          </view>
        </view>
        
        <view class="user-info" v-else>
          <view class="avatar-container" :style="{ marginTop: -(headerHeight/2) + 'px' }">
            <image class="avatar" :src="defaultAvatar"></image>
          </view>
          <view class="user-detail">
            <text class="nickname">未登录</text>
            <text class="login-tip">登录后查看更多信息</text>
          </view>
          <view class="login-btn" @click="goToLoginFromUser">
            <text>登录</text>
          </view>
        </view>
      </view>
      
      <!-- 曲线分隔区域 -->
      <view class="curve-separator"></view>
      
      <!-- 菜单列表 -->
      <view class="menu-list">
        <view 
          class="menu-item" 
          v-for="item in menuList" 
          :key="item.id" 
          @click="handleMenuClick(item)"
        >
          <view class="menu-icon">
            <u-icon :name="item.icon" size="22" :color="themeColor"></u-icon>
          </view>
          <view class="menu-text">{{ item.text }}</view>
          <view class="menu-arrow">
            <u-icon name="arrow-right" size="18" color="#c0c4cc"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 退出登录按钮 -->
      <view class="logout-section" v-if="isLoggedIn">
        <button class="logout-btn" @click="handleLogout" :style="{ borderColor: themeColor, color: themeColor }">退出登录</button>
      </view>
      
      <!-- 版本信息 -->
      <view class="version-info">
        <text>版本 1.0.0</text>
      </view>
      
      <!-- 昵称编辑抽屉 -->
      <u-popup :show="showNicknamePopup" mode="bottom" @close="closeNicknamePopup" round="16" safe-area-inset-bottom>
        <view class="nickname-popup">
          <view class="popup-header">
            <text class="popup-title">编辑个人资料</text>
            <view class="popup-close" @tap="closeNicknamePopup">
              <u-icon name="close" size="20" color="#999"></u-icon>
            </view>
          </view>
          
          <!-- 头像编辑区域 -->
          <view class="avatar-edit-section">
            <button class="avatar-edit-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatarInPopup">
              <image class="avatar-preview" :src="editingAvatarUrl || defaultAvatar" mode="aspectFill"></image>
              <view class="camera-icon-popup">
                <u-icon name="camera-fill" color="#fff" size="16"></u-icon>
              </view>
            </button>
            <text class="avatar-tip">点击更换头像</text>
          </view>
          
          <view class="popup-content">
            <view class="input-container">
              <text class="input-label">昵称</text>
              <view class="input-wrapper">
                <input 
                  class="nickname-input" 
                  type="nickname"
                  v-model="editingNickname" 
                  placeholder="请输入昵称" 
                  maxlength="20"
                  @nicknamereview="onNicknameReview"
                />
                <view class="input-clear" v-if="editingNickname" @tap="clearNickname">
                  <u-icon name="close-circle-fill" size="20" color="#999"></u-icon>
                </view>
              </view>
            </view>
          </view>
          <view class="popup-footer">
            <button 
              class="save-nickname-btn" 
              :disabled="!isEditValid" 
              :style="{ backgroundColor: isEditValid ? themeColor : '#cccccc' }"
              @tap="saveUserInfo"
            >保存</button>
          </view>
        </view>
      </u-popup>
    </view>
  </PageTabbar>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch, inject, Ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import useAuth from '../../hooks/useAuth';
import useSystemInfo from '../../hooks/useSystemInfo';
import { MENU_ITEMS, DEFAULT_AVATAR, ROUTES } from '../../constants';
import PageTabbar from '../../components/PageTabbar.vue';

// 声明uni类型
declare const uni: any;

// 获取认证相关的方法和状态
const { isLoggedIn, userInfo, goToLogin, handleLogout, chooseAvatar, goToUserInfoPage, updateUserInfo, uploadAvatar } = useAuth();

// 获取系统信息
const { statusBarHeight, headerHeight } = useSystemInfo();
// 默认头像
const defaultAvatar = DEFAULT_AVATAR;

// 主题色
const themeColor = ref('#07c160');
// 尝试从App.vue注入的主题色
const appThemeColor = inject<Ref<string>>('themeColor', ref('#07c160'));

// 渐变背景样式
const gradientStyle = ref({
  background: 'linear-gradient(45deg, #07c160, #09b1b9)'
});

// 自定义跳转到登录页面方法
const goToLoginFromUser = () => {
  uni.navigateTo({
    url: `/pages/login/login?from=${encodeURIComponent(ROUTES.USER)}`
  });
};

// 从图片中提取主题色
const extractThemeColor = (imgPath: string) => {
  // 先检查本地缓存中是否已有该图片的主题色
  const cachedThemeColors = uni.getStorageSync('THEME_COLORS') || {};
  
  // 如果缓存中已有该图片的主题色，直接使用
  if (cachedThemeColors[imgPath]) {
    console.log('使用缓存的主题色:', cachedThemeColors[imgPath]);
    const { mainColor, gradientColor } = cachedThemeColors[imgPath];
    
    // 更新主题色
    themeColor.value = mainColor;
    gradientStyle.value = {
      background: gradientColor
    };
    
    // 如果有App注入的主题色，也更新它
    if (appThemeColor) {
      appThemeColor.value = mainColor;
    }
    
    return;
  }
  
  // 如果缓存中没有，则计算主题色
  console.log('计算主题色:', imgPath);
  
  // 创建离屏canvas
  const canvas = uni.createOffscreenCanvas({ type: '2d', width: 100, height: 100 });
  const ctx = canvas.getContext('2d');
  
  // 加载图片
  uni.getImageInfo({
    src: imgPath,
    success: (res: { path: string, width: number, height: number }) => {
      // 创建图片对象
      const img = canvas.createImage();
      img.src = res.path;
      
      img.onload = () => {
        try {
          // 绘制图片到canvas
          ctx.drawImage(img, 0, 0, 100, 100);
          
          // 获取像素数据
          const imageData = ctx.getImageData(0, 0, 100, 100).data;
          
          // 计算主色调
          let r = 0, g = 0, b = 0;
          let count = 0;
          let maxR = 0, maxG = 0, maxB = 0;
          let minR = 255, minG = 255, minB = 255;
          
          // 第一遍：计算平均值和找出最大最小值
          for (let i = 0; i < imageData.length; i += 4) {
            const currentR = imageData[i];
            const currentG = imageData[i + 1];
            const currentB = imageData[i + 2];
            const alpha = imageData[i + 3] / 255;
            
            // 只统计不透明的像素
            if (alpha > 0.5) {
              r += currentR;
              g += currentG;
              b += currentB;
              count++;
              
              // 更新最大最小值
              maxR = Math.max(maxR, currentR);
              maxG = Math.max(maxG, currentG);
              maxB = Math.max(maxB, currentB);
              minR = Math.min(minR, currentR);
              minG = Math.min(minG, currentG);
              minB = Math.min(minB, currentB);
            }
          }
          
          // 计算平均值
          r = Math.round(r / count);
          g = Math.round(g / count);
          b = Math.round(b / count);
          
          // 计算颜色的HSL值
          const [h, s, l] = rgbToHsl(r, g, b);
          
          // 如果颜色太浅（亮度过高）或饱和度太低
          if (l > 0.7 || s < 0.2) {
            // 降低亮度，增加饱和度
            const newL = Math.max(0.5, l - 0.2); // 降低亮度但不低于0.5
            const newS = Math.min(1, s + 0.3); // 增加饱和度但不超过1
            [r, g, b] = hslToRgb(h, newS, newL);
          }
          
          // 生成第二个颜色（稍微调整色相和亮度）
          const h2 = (h + 0.1) % 1; // 色相偏移10%
          const s2 = Math.min(1, s + 0.1); // 稍微提高饱和度
          const l2 = Math.min(0.9, l + 0.1); // 稍微提高亮度
          const [r2, g2, b2] = hslToRgb(h2, s2, l2);
          
          // 生成主题色和渐变色
          const mainColor = `rgb(${r},${g},${b})`;
          const gradientColor = `linear-gradient(45deg, rgb(${r},${g},${b}), rgb(${r2},${g2},${b2}))`;
          
          // 更新渐变背景
          gradientStyle.value = {
            background: gradientColor
          };
          
          // 更新主题色
          themeColor.value = mainColor;
          
          // 如果有App注入的主题色，也更新它
          if (appThemeColor) {
            appThemeColor.value = mainColor;
          }
          
          // 缓存主题色
          cachedThemeColors[imgPath] = {
            mainColor,
            gradientColor,
            timestamp: Date.now()
          };
          
          // 保存到本地存储
          uni.setStorageSync('THEME_COLORS', cachedThemeColors);
          
        } catch (error) {
          console.error('提取颜色失败:', error);
          // 使用默认渐变色
          gradientStyle.value = {
            background: 'linear-gradient(45deg, #07c160, #09b1b9)'
          };
          // 使用默认主题色
          themeColor.value = '#07c160';
          
          // 如果有App注入的主题色，也更新它
          if (appThemeColor) {
            appThemeColor.value = '#07c160';
          }
        }
      };
    },
    fail: () => {
      // 使用默认渐变色
      gradientStyle.value = {
        background: 'linear-gradient(45deg, #07c160, #09b1b9)'
      };
      // 使用默认主题色
      themeColor.value = '#07c160';
      
      // 如果有App注入的主题色，也更新它
      if (appThemeColor) {
        appThemeColor.value = '#07c160';
      }
    }
  });
};

// RGB转HSL
const rgbToHsl = (r: number, g: number, b: number): [number, number, number] => {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h = 0;
  let s = 0;
  const l = (max + min) / 2;
  
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    
    h /= 6;
  }
  
  return [h, s, l];
};

// HSL转RGB
const hslToRgb = (h: number, s: number, l: number): [number, number, number] => {
  let r, g, b;
  
  if (s === 0) {
    r = g = b = l;
  } else {
    const hue2rgb = (p: number, q: number, t: number) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };
    
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
  
  return [
    Math.round(r * 255),
    Math.round(g * 255),
    Math.round(b * 255)
  ];
};

// 获取系统信息并初始化
onMounted(() => {
  // 移除getSystemInfo调用，因为hook已经在初始化时计算了高度
});

// 清理过期的主题色缓存（超过7天的缓存）
const cleanExpiredThemeColors = () => {
  const cachedThemeColors = uni.getStorageSync('THEME_COLORS') || {};
  const now = Date.now();
  const expireTime = 7 * 24 * 60 * 60 * 1000; // 7天
  let hasExpired = false;
  
  // 检查是否有过期的缓存
  Object.keys(cachedThemeColors).forEach(key => {
    if (now - cachedThemeColors[key].timestamp > expireTime) {
      delete cachedThemeColors[key];
      hasExpired = true;
    }
  });
  
  // 如果有过期的缓存，更新存储
  if (hasExpired) {
    uni.setStorageSync('THEME_COLORS', cachedThemeColors);
  }
};

// 监听用户信息变化
watch(() => userInfo.avatarUrl, (newAvatarUrl, oldAvatarUrl) => {
  if (newAvatarUrl && newAvatarUrl !== defaultAvatar) {
    // 只有当头像URL变化时才重新提取主题色
    if (newAvatarUrl !== oldAvatarUrl) {
      extractThemeColor(newAvatarUrl);
    }
  }
}, { immediate: true });

// 页面显示时检查用户信息
onShow(() => {
  // 清理过期的主题色缓存
  cleanExpiredThemeColors();
  
  // 初始化背景色
  if (isLoggedIn.value && userInfo.avatarUrl && userInfo.avatarUrl !== defaultAvatar) {
    extractThemeColor(userInfo.avatarUrl);
  }
});

// 菜单列表
const menuList = computed(() => {
  return MENU_ITEMS.filter(item => {
    // 如果需要登录但未登录，则不显示该菜单项
    if (item.needLogin && !isLoggedIn.value) {
      return false;
    }
    return true;
  });
});

// 处理菜单点击
const handleMenuClick = (item: any) => {
  // 如果需要登录但未登录，则跳转到登录页
  if (item.needLogin && !isLoggedIn.value) {
    goToLoginFromUser();
    return;
  }
  
  // 跳转到对应页面
  if (item.path) {
    uni.navigateTo({
      url: item.path
    });
  }
};

// 昵称编辑相关
const showNicknamePopup = ref(false);
const editingNickname = ref('');
const editingAvatarUrl = ref('');
const isUploading = ref(false);

// 判断编辑是否有效
const isEditValid = computed(() => {
  return !!editingNickname.value.trim() && !isUploading.value;
});

// 处理编辑昵称
const handleEditNickname = (e: any) => {
  // 阻止事件冒泡
  e?.stopPropagation?.();
  
  if (isLoggedIn.value) {
    // 设置初始值
    editingNickname.value = userInfo.nickName || '';
    editingAvatarUrl.value = userInfo.avatarUrl || '';
    // 显示抽屉
    showNicknamePopup.value = true;
  }
};

// 关闭昵称编辑抽屉
const closeNicknamePopup = () => {
  showNicknamePopup.value = false;
};

// 在弹窗中选择头像
const onChooseAvatarInPopup = (e: any) => {
  const tempFilePath = e.detail.avatarUrl;
  
  // 显示加载提示
  uni.showLoading({
    title: '上传中...'
  });
  
  // 标记正在上传
  isUploading.value = true;
  
  // 上传头像
  uploadAvatar(tempFilePath)
    .then((url: any) => {
      editingAvatarUrl.value = url;
      uni.hideLoading();
      isUploading.value = false;
    })
    .catch((err: any) => {
      uni.hideLoading();
      isUploading.value = false;
      uni.showToast({
        title: '上传头像失败',
        icon: 'none'
      });
      console.error('上传头像失败', err);
    });
};

// 昵称审核回调
const onNicknameReview = (e: any) => {
  if (e.detail.errMsg) {
    uni.showToast({
      title: '昵称包含敏感内容，请修改',
      icon: 'none'
    });
    editingNickname.value = '';
  }
};

// 清空昵称
const clearNickname = () => {
  console.log('清空昵称');
  editingNickname.value = '';
};

// 保存用户信息
const saveUserInfo = () => {
  if (!isEditValid.value) return;
  
  // 显示加载提示
  uni.showLoading({
    title: '保存中...'
  });
  
  // 更新用户信息
  updateUserInfo(userInfo.id, editingNickname.value.trim(), editingAvatarUrl.value)
    .then(() => {
      uni.hideLoading();
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
      // 关闭抽屉
      showNicknamePopup.value = false;
    })
    .catch((err: any) => {
      uni.hideLoading();
      uni.showToast({
        title: '保存失败',
        icon: 'none'
      });
      console.error('保存用户信息失败', err);
    });
};

// 处理头像点击
const handleAvatarClick = (e: any) => {
  // 阻止事件冒泡
  e?.stopPropagation?.();
  
  // 如果已登录，则可以查看大图或更换头像
  if (isLoggedIn.value) {
    uni.showActionSheet({
      itemList: ['查看大图', '编辑资料'],
      success: (res: { tapIndex: number }) => {
        if (res.tapIndex === 0) {
          // 查看大图
          uni.previewImage({
            urls: [userInfo.avatarUrl || defaultAvatar],
            current: 0
          });
        } else if (res.tapIndex === 1) {
          // 编辑资料
          handleEditNickname(e);
        }
      }
    });
  }
};

// 跳转到用户编辑页
const goToUserEdit = () => {
  // 打开编辑抽屉
  handleEditNickname({
    stopPropagation: () => {}
  });
};
</script>

<style lang="scss">
.user-container {
  // min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
  // padding-bottom: 120rpx; /* 为底部tabbar预留空间 */
  
  .gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600rpx;
    z-index: 0;
    transition: background 0.3s ease;
    
    .blur-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.1);
    }
  }
  
  .user-info-section {
    position: relative;
    z-index: 1;
    background: transparent;
    padding-bottom: 80rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-bottom: 0;
    
    .user-info {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 120rpx;
      z-index: 2;
      
      .avatar-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 30rpx;
        
        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          background-color: #f0f0f0;
          box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
          border: 6rpx solid rgba(255, 255, 255, 0.8);
        }
      }
      
      .user-detail {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20rpx;
        
        .nickname-container {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          position: relative;
          
          .nickname {
            font-size: 36rpx;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
          }
          
          .edit-icon {
            position: absolute;
            right: -60rpx;
            top: 50%;
            transform: translateY(-50%);
            width: 36rpx;
            height: 36rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            padding: 6rpx;
          }
        }
        
        .user-id, .login-tip {
          font-size: 26rpx;
          color: #fff;
          text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
          background: rgba(0, 0, 0, 0.1);
          padding: 4rpx 16rpx;
          border-radius: 30rpx;
        }
      }
      
      .login-btn {
        width: 120rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30rpx;
        font-size: 28rpx;
        backdrop-filter: blur(5px);
        background: rgba(255, 255, 255, 0.9);
        color: #07c160;
      }
    }
  }
  
  .curve-separator {
    height: 40rpx;
    background-color: #f8f8f8;
    position: relative;
    z-index: 1;
    // margin-top: -20rpx;
    
    &::before {
      content: '';
      position: absolute;
      top: -100rpx;
      left: -20%;
      right: -20%;
      height: 300rpx;
      background-color: #f8f8f8;
      border-radius: 100% 100% 0 0 / 100%;
    }
  }
  
  .menu-list {
    position: relative;
    z-index: 1;
    background-color: #fff;
    margin: -160rpx auto 0rpx auto;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    width: 85%;
    padding: 0;
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:active {
        background-color: #f9f9f9;
      }
      
      .menu-icon {
        width: 40rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
      }
      
      .menu-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
      
      .menu-arrow {
        color: #ccc;
        display: flex;
        align-items: center;
      }
    }
  }
  
  .logout-section {
    // padding: 0 30rpx;
    margin: 40rpx 0;
    position: relative;
    z-index: 1;
    
    .logout-btn {
      width: 85%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      background-color: #fff;
      border: 1px solid #07c160;
      color: #07c160;
      font-size: 28rpx;
    }
  }
  
  .version-info {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    padding: 30rpx 0 50rpx 0; /* 增加底部padding */
    position: relative;
    z-index: 1;
  }
  
  .menu-grid {
    display: none; /* 隐藏原来的九宫格 */
  }
}

.nickname-popup {
  padding: 30rpx;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
    
    .popup-close {
      padding: 10rpx;
    }
  }
  
  .avatar-edit-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0 30rpx;
    
    .avatar-edit-wrapper {
      position: relative;
      width: 150rpx;
      height: 150rpx;
      padding: 0;
      margin: 0;
      background: none;
      border: none;
      
      &::after {
        border: none;
      }
      
      .avatar-preview {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        background-color: #f0f0f0;
        border: 2rpx solid rgba(0, 0, 0, 0.05);
      }
      
      .camera-icon-popup {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2rpx solid #fff;
      }
    }
    
    .avatar-tip {
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
  
  .popup-content {
    padding: 10rpx 0;
    
    .input-container {
      position: relative;
      border-bottom: 1px solid #eee;
      padding: 20rpx 0;
      display: flex;
      align-items: center;
      
      .input-label {
        font-size: 28rpx;
        color: #333;
        margin-right: 20rpx;
        min-width: 80rpx;
      }
      
      .input-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
      }
      
      .nickname-input {
        flex: 1;
        height: 80rpx;
        font-size: 30rpx;
        color: #333;
        background: none;
        padding: 0;
        padding-right: 60rpx;
        margin: 0;
      }
      
      .input-clear {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: 30rpx;
      }
    }
  }
  
  .popup-footer {
    margin-top: 60rpx;
    padding-bottom: 30rpx;
    
    .save-nickname-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;
      text-align: center;
    }
  }
}
</style> 